<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UI自动化用例列表</title>
    <!-- 引入Bootstrap简化样式（无需本地文件，通过CDN加载） -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="container mt-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1>UI自动化用例管理</h1>
        <!-- 可后续扩展“新增用例”按钮，此处预留 -->
        <button class="btn btn-primary" disabled>新增用例</button>
    </div>

    <!-- 用例筛选区域 -->
    <div class="card mb-4 p-3">
        <form action="{% url 'case_list' %}" method="get" class="row g-3">
            <div class="col-md-4">
                <label class="form-label">所属模块</label>
                <select name="module" class="form-select" onchange="this.form.submit()">
                    <option value="">全部模块</option>
                    {% for module in modules %}
                        <option value="{{ module }}" {% if request.GET.module == module %}selected{% endif %}>
                            {{ module }}
                        </option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-4">
                <label class="form-label">用例状态</label>
                <select name="status" class="form-select" onchange="this.form.submit()">
                    <option value="">全部状态</option>
                    <option value="draft" {% if request.GET.status == 'draft' %}selected{% endif %}>草稿</option>
                    <option value="active" {% if request.GET.status == 'active' %}selected{% endif %}>启用</option>
                    <option value="disabled" {% if request.GET.status == 'disabled' %}selected{% endif %}>禁用</option>
                </select>
            </div>
            <div class="col-md-4 d-flex align-items-end">
                <button type="submit" class="btn btn-secondary w-100">筛选</button>
            </div>
        </form>
    </div>

    <!-- 用例列表表格 -->
    <div class="card">
        <div class="card-body">
            <table class="table table-hover table-bordered">
                <thead class="table-light">
                    <tr>
                        <th>用例名称</th>
                        <th>所属模块</th>
                        <th>测试类型</th>
                        <th>状态</th>
                        <th>执行者</th>
                        <th>最近更新</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% if cases %}
                        {% for case in cases %}
                            <tr>
                                <td>{{ case.name }}</td>
                                <td>{{ case.module }}</td>
                                <td>
                                    {% if case.case_type == 'web' %}Web端{% endif %}
                                    {% if case.case_type == 'mobile' %}移动端{% endif %}
                                    {% if case.case_type == 'desktop' %}桌面端{% endif %}
                                </td>
                                <td>
                                    {% if case.status == 'active' %}
                                        <span class="badge bg-success">启用</span>
                                    {% elif case.status == 'draft' %}
                                        <span class="badge bg-warning">草稿</span>
                                    {% else %}
                                        <span class="badge bg-danger">禁用</span>
                                    {% endif %}
                                </td>
                                <td>{{ case.executor|default:"未执行" }}</td>
                                <td>{{ case.updated_at|date:"Y-m-d H:i" }}</td>
                                <td>
                                    <a href="{% url 'case_detail' case.id %}" class="btn btn-sm btn-info">查看详情</a>
                                </td>
                            </tr>
                        {% endfor %}
                    {% else %}
                        <tr>
                            <td colspan="7" class="text-center text-muted">暂无用例数据</td>
                        </tr>
                    {% endif %}
                </tbody>
            </table>
        </div>
    </div>

    <!-- 引入Bootstrap脚本（可选，用于后续扩展交互） -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>